/*
 * @Title: 公用的头部导航栏
 * @Created by: kimlaptop  
 */
<template>
	<view >
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<!-- <view :class="[isShowWhiteBg ? 'WhiteBg' : '']">111111111111111</view> -->
		<!-- 顶部不浮动导航栏 -->
		<view>
			<view
			class='home-search' 
			:style="{marginTop:statusBarHeight}"
			id="search">
				<!-- 导航左部分 -->
				<view>
				     <!-- 显示返回上一级 -->
				      <view v-if="config.left.ifleftGoback" class="leftGoback" @tap="leftIconTap">
				       <uni-icon :type="config.left.leftGoback" size="22" :color="config.left.leftGobackColor"></uni-icon>
				      </view>
				      <!-- 显示当前位置 -->
				      <view class="home-search-pos" @tap="leftGoCitySelect" v-if="config.left.leftExist">
				       <image src="/static/pos-home.png" alt=""></image>
				       <view>
				        <text>{{leftIconName}}</text>
				       </view>
				      </view>
				    </view>
				    <!-- 导航中部 -->
				    <view 
				    class="home-search-search" 
				    v-if="config.mid.ifSearch"
				    :class="[midSearchWidth]"
				    :style="{opacity:config.mid.isOpacity}">
				    <view>
				     <uni-icon type="search" size="20" color="#DBDBDB"></uni-icon>
				     <input 
				     :placeholder="config.mid.placeText" 
				     placeholder-style="color:#BCBCBC"
				      @tap="focusHandle" 
				      :disabled="config.mid.isdisabled"
				     />
				    </view>
				    <view class="scan" v-if="config.mid.isShowScan" @tap="goScan"><uni-icon type="scan" size="20" color="#333333"></uni-icon></view>
				    </view>
					
				    <!-- 导航右部 -->
				    <!-- #ifndef MP-WEIXIN -->
				    <view class="right" v-if="config.right.rightExist">
				     <!-- 可以有两个图标的情况 -->
				     <view @tap="rightTapHandle1">
				      <image :src="config.right.rightIcon1" alt="" v-if="config.right.ifrightIcon1"></image>
				      <text>{{config.right.rightIconName1}}</text>
				     </view>
				     <view @tap="rightTapHandle2" class="rightIcon2" v-if="config.right.ifrightIcon2">
				      <image :src="config.right.rightIcon2" alt=""  ></image>
				      <text>{{config.right.rightIconName2}}</text>
				     </view>
				     
				    </view>
				    <!-- 右侧图标文字横排显示情况 -->
				    <view class="rightRow" v-if="config.row.isShowRightRow"  @tap="rightTapHandle3">
				     <view><text :style="{color:config.row.rowTextColor}">{{config.row.rowText}}</text></view>
				     <view><uni-icon :type="config.row.rowIco" size="20" :color="config.row.rowIcoColor"></uni-icon></view>
				    </view>
				    <!-- #endif -->
				    
				    <!-- #ifdef MP-WEIXIN -->
				    <view class="right2" v-if="config.right.rightExist">
				     <view @tap="rightTapHandle1">
				      <image :src="config.right.rightIcon1" alt="" v-if="config.right.ifrightIcon1"></image>
				      <text>{{config.right.rightIconName1}}</text>
				     </view>
				     <view @tap="rightTapHandle2"  class="rightIcon2" v-if="config.right.ifrightIcon2">
				      <image :src="config.right.rightIcon2" alt=""></image>
				      <text>{{config.right.rightIconName2}}</text>
				     </view>
				    </view>
				    <!-- 右侧图标文字横排显示情况 -->
				    <view class="rightRow2" v-if="config.row.isShowRightRow"  @tap="rightTapHandle3">
				     <view><text :style="{color:config.row.rowTextColor}">{{config.row.rowText}}</text></view>
				     <view><uni-icon :type="config.row.rowIco" size="20" :color="config.row.rowIcoColor"></uni-icon></view>
				    </view>
				    <!-- #endif -->
			</view>	
		</view>
		
		<!-- 顶部浮动导航栏 -->
		<view v-if="ifShowTopFixed2" class="fixedTopBox" v-cloak >
			<view  class="uni-status-bar2"></view>
			<view
			v-if="ifShowTopFixed"
			class='home-search fixedStyle' 
			id="search" 
			:style="{paddingTop:statusBarHeight}" >
				<!-- <view class='home-search' > -->
				<!-- 导航左部分 -->
				<view>
				     <!-- 显示返回上一级 -->
				      <view v-if="config.left.ifleftGoback" class="leftGoback" @tap="leftIconTap">
				       <uni-icon :type="config.left.leftGoback" size="22" color="#333333"></uni-icon>
				      </view>
				      <!-- 显示当前位置 -->
				      <view class="home-search-pos" @tap="leftGoCitySelect" v-if="config.left.leftExist">
				       <image src="/static/pos-blue.png" alt=""></image>
				       <view>
				        <text>{{leftIconName}}</text>
				       </view>
				      </view>
				    </view>
				    <!-- 导航中部 -->
				    <view 
				    class="home-search-search" 
				    v-if="config.mid.ifSearch"
				    :class="[midSearchWidth]"
				    :style="{opacity:config.mid.isOpacity}">
				    <view>
				     <uni-icon type="search" size="20" color="#DBDBDB"></uni-icon>
				     <input 
				     :placeholder="config.mid.placeText" 
				     placeholder-style="color:#BCBCBC"
				      @tap="focusHandle" 
				      :disabled="config.mid.isdisabled"
				     />
				    </view>
				    <view class="scan" v-if="config.mid.isShowScan" @tap="goScan"><uni-icon type="scan" size="20" color="#333333"></uni-icon></view>
				    </view>
				    <!-- 导航右部 -->
				    <!-- #ifndef MP-WEIXIN -->
				    <view class="right" v-if="config.right.rightExist">
				     <!-- 可以有两个图标的情况 -->
				     <view @tap="rightTapHandle1">
				      <image :src="config.right.rightIcon1" alt="" v-if="config.right.ifrightIcon1"></image>
				      <text>{{config.right.rightIconName1}}</text>
				     </view>
				     <view @tap="rightTapHandle2" class="rightIcon2" v-if="config.right.ifrightIcon2">
				      <image :src="config.right.rightIcon2" alt=""  ></image>
				      <text>{{config.right.rightIconName2}}</text>
				     </view>
				     
				    </view>
				    <!-- 右侧图标文字横排显示情况 -->
				    <view class="rightRow" v-if="config.row.isShowRightRow"  @tap="rightTapHandle3">
				     <view><text :style="{color:config.row.rowTextColor}">{{config.row.rowText}}</text></view>
				     <view><uni-icon :type="config.row.rowIco" size="20" :color="config.row.rowIcoColor"></uni-icon></view>
				    </view>
				    <!-- #endif -->
				    
				    <!-- #ifdef MP-WEIXIN -->
				    <view class="right2" v-if="config.right.rightExist">
				     <view @tap="rightTapHandle1">
				      <image :src="config.right.rightIcon1" alt="" v-if="config.right.ifrightIcon1"></image>
				      <text>{{config.right.rightIconName1}}</text>
				     </view>
				     <view @tap="rightTapHandle2"  class="rightIcon2" v-if="config.right.ifrightIcon2">
				      <image :src="config.right.rightIcon2" alt=""></image>
				      <text>{{config.right.rightIconName2}}</text>
				     </view>
				    </view>
				    <!-- 右侧图标文字横排显示情况 -->
				    <view class="rightRow2" v-if="config.row.isShowRightRow"  @tap="rightTapHandle3">
				     <view><text :style="{color:config.row.rowTextColor}">{{config.row.rowText}}</text></view>
				     <view><uni-icon :type="config.row.rowIco" size="20" :color="config.row.rowIcoColor"></uni-icon></view>
				    </view>
				    <!-- #endif -->
			</view>	
		</view>	
	</view>
	
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		beforeDestroy(){
			console.log('input销毁');
			
		},
		created() {
				const _this = this;
				
				//获取所有页面
				let currentPages = getCurrentPages();
				let pageLen = currentPages.length;
			//监听页面滚动，页面向下滚动的时候导航逐渐变白
		
				// #ifndef H5
				currentPages[pageLen - 1].onPageScroll = function(e) {
					if(e.scrollTop>120){
						_this.ifShowTopFixed2 = true
					}else{
						_this.ifShowTopFixed2 = false
					}
					if (e.scrollTop > _this.topHeight) {
						_this.ifShowTopFixed = false
						_this.$store.commit('typeTopUpdate',false)
							// console.log('向下滚动');	
					} else {
						if(e.scrollTop >120){
							_this.ifShowTopFixed = true;
							_this.$store.commit('typeTopUpdate',true)
						}else{
							_this.ifShowTopFixed = false
							_this.$store.commit('typeTopUpdate',false)
						};
						// console.log('向上滚动');
					}
					 _this.topHeight = e.scrollTop
				};
				// #endif
				// #ifdef H5
				window.onscroll = function(e) {
					let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					if(scrollTop>120){
						_this.ifShowTopFixed2 = true
					}else{
						_this.ifShowTopFixed2 = false
					}
					if (scrollTop > _this.topHeight) {
						_this.ifShowTopFixed = false
						_this.$store.commit('typeTopUpdate',false)
							// console.log('向下滚动');	
					}else {
						if(scrollTop >120){
							_this.$store.commit('typeTopUpdate',true)
							_this.ifShowTopFixed = true;
							
						}else{
							_this.ifShowTopFixed = false
							_this.$store.commit('typeTopUpdate',false)
						};
						// console.log('向上滚动');
					}
					 _this.topHeight = scrollTop
				};
				// #endif
				
				
		},
		components:{
			uniIcon,
		},
		props:{
			// 右侧第一个按钮事件
			rightTapHandle1:{
				type:Function,
				default:function(){
					return function(){
						console.log('rightTapHandle1 click');
					}
				}
			},
			// 右侧第二个按钮事件
			rightTapHandle2:{
				type:Function,
				default:function(){
					return function(){
						console.log('rightTapHandle2 click')
					}
				}
			},
			rightTapHandle3:{
				type:Function,
				default:function(){
					return function(){
						console.log('rightTapHandle3 click')
					}
				}
			},
			//扫一扫
			goScan:{
				type:Function,
				default:function(){
					return function(){
						console.log('goScan');
					}
				}
			},
			// 当输入框聚焦时
			focusHandle:{
				type:Function,
				default:function(){
					return function(){
						console.log('focusHandle')
					}
				}
			},
			// 当输入框失去焦点
			blurHandle:{
				type:Boolean,
				default:false
			},
			config:{
				type:Object,
				default:function(){
					return{
						left:{
							leftExist:true, //是否显示地名
							ifleftGoback:false,//是否显示返回按钮
							leftGoback:'arrowleft', //返回上一层图标
							leftGobackColor:'#ffffff',//返回上一层图标颜色
							// leftIcon:'/static/pos-home.png' //地名图标
						},
						mid:{
							ifSearch:true, //是否显示搜索栏
							placeText:'请输入搜索内容'  ,//搜索栏placeholder内容
							isShowScan:true,
							isdisabled:false,//是否禁用搜索框
							isOpacity:1,//输入框是否半透明
						},
						right:{
							rightExist:true, //是否显示右侧图标文字
							rightIcon1:'/static/weater.png',//图标
							rightIconName1:'多云',//图标下方文字
							rightIcon2:'/static/weater.png',
							rightIconName2:'多云',
							ifrightIcon2:false,//是否显示第二个图标
							ifrightIcon1:true,//是否显示第一个图标
							// 右侧图标文字横排显示
						},
						row:{
							isShowRightRow:false, //是否显示右侧图标文字横排
							rowText:'',//文字内容
							rowIco:'',//icon
							rowTextColor:'',//文字颜色
							rowIcoColor:''//icon颜色
							}
					}
				}
			}
		},
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				searchTop:null, //实时计算小程序导航栏距离状态栏的高度
				ifShowChooseCity:false,
				topHeight:0,
				showHead:false,
				ifShowTopFixed:false,
				ifShowTopFixed2:false,
				isShowWhiteBg:false//白色背景
			}
		},
		methods: {
			leftIconTap(){
				uni.navigateBack({
					delta:1
				})
				},
				// 跳转到选择城市
			leftGoCitySelect(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/citySelect'
				})
			},
			// 当状态栏是齐刘海时导航栏的高度
			// getSearchTop(){
			// 	if(this.statusBarHeight > 25 + 'px'){
			// 		this.searchTop = 44
			// 	}
			// },
		},
		computed:{
			// isShowWhiteBg(){
			// 	},
			midSearchWidth(){
				if(this.config.row.isShowRightRow){
					return 'miniInput-view'
				}else{
					//#ifdef MP-WEIXIN
					 return 'input-view-wx'
					//#endif
					
					//#ifndef MP-WEIXIN
					return 'input-view'
					//#endif
				}
			},
			// 默认获取当前位置
			leftIconName(){
				if(this.$store.state.localPosition){
					return this.$store.state.localPosition
				}
				else{
					 return '加载中...'
				}
				
			},
		},
		mounted() {
			// this.getSearchTop();
			// 手机导航栏高度
			console.log('手机导航栏高度:'+ global.statusBarHeight); 
		}
		
	}
</script>

<style scoped>

	.uni-status-bar {
		position: absolute;
		z-index: 999;
		top:0;
		display: block;
		width: 100%;
		height: var(--status-bar-height);
	}
	.uni-status-bar2{
		z-index: 999;
		top:0;
		/* background: #0075EE; */
		width: 100%;
		height: var(--status-bar-height);
	}
	.home-search{
		width: 100%;
		position: absolute;
		display: flex;
		z-index: 999;
		 top:0;
		flex-direction: row;
		justify-content: space-between;
		height: 88upx;
		line-height: 88upx;
        box-sizing: content-box;
	}
	.home-search>view{
		line-height: 88upx;
		display:flex;
		flex-direction: row;
	}
	.input-view-wx{
		width:400upx;
		margin-left: -140upx;
	}
	.input-view{
		width: 500upx;
	}
	.miniInput-view{
		width:420upx;
	}
	.leftBack{
		line-height: 66upx;
	}
	.home-search-search {
		display:flex;
		height: 60upx;
		margin-top:14upx;
		background-color: #FFFFFF;
		border-radius: 30upx;
		padding:0 20upx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
	}
	
	.home-search-search>view{
		display:flex;
		justify-content: flex-start;
		align-items: center;
	}
	.scan{
		border-left:1upx solid #DBDBDB;
		height: 60upx;
		padding-left: 20upx;
		display: flex;
		align-items: center;
	}
	.home-search-search input{
		width: 284upx;
		height: 60upx;
		border: none;
		font-size: 24upx;
		color: #999999;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.home-search-pos{
		width:148upx;
		height: 88upx;
		margin: auto;
		display: flex;
		align-items: center;
	}
	.home-search-pos image{
		width:26upx;
		height: 30upx;
		margin-left:12upx;
	}
	.home-search-pos text{
		white-space: nowrap;  /*强制span不换行*/
		display: inline-block;  /*将span当做块级元素对待*/
		height: 60upx;
		text-align: left;
		float: left;
		margin-left:10upx;
		line-height: 60upx;
		color: white;
		font-size: 24upx;
		width:100upx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.right{
		height: 88upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0upx 20upx;
	}
	.right>view,.right2>view{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.rightIcon2{
		margin-left: 40upx;
		margin-right:20upx;
	}
	.right image,.right2 image{
		max-width:44upx;
		max-height: 40upx;
		margin-top: 10upx;
	}
	.right text,.right2 text{
		white-space: nowrap;
		color: white;
		text-align: center;
		font-size: 18upx;
		line-height: 34upx;
	}
	
	.right2{
		margin-top: 64upx;
		height: 88upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20upx;
	}
	.leftGoback{
		margin-left: 10upx;
		display: flex;
		height: 88upx;
		justify-content: center;
		align-items: center;
	}
	.rightRow{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 88upx;
		margin:0upx 20upx;
	}
	.rightRow text,.rightRow2 text{
		font-size: 24upx;
	}
	.rightRow2{
		margin-top: 64upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 88upx;
		margin:0upx 12upx;
	}
	
	/* #ifdef MP-WEIXIN */
	.home-search-search{
		width:52%;
	}
	.home-search-search input{
		width: 250upx;
	}
	/* #endif */
	
	/* 头部浮动时候的样式 */
	
	.fixedTopBox{
		position: fixed;
		width: 100%;
		/* padding-top: var(--status-bar-height); */
		display: flex;
		height: auto;
		z-index: 999;
		flex-direction: row;
		justify-content: space-between;
		/* height: 88upx; */
		line-height: 88upx;
		/* box-sizing: content-box; */
		top:0;
		left:0;
		background: #FFFFFF;
	}
	.fixedStyle{
		border-bottom: 1upx solid #DDDDDD; 
		background: #FFFFFF;
	}
	.fixedStyle .home-search-search{
		background-color: #f6f6f6;
	}
	.fixedStyle .home-search-pos text{
		color: #333;
	}
	/* .topBgWrite{
		background: #FFFFFF;
		padding-top:var(--status-bar-height);
	} */
	.WhiteBg{
		position: fixed;
		top:0;
		left: 0;
		z-index: 999;
		width: 100%;
		background: #FFFFFF;
		height:var(--status-bar-height);
	}
</style>
